import { Layout } from 'antd'
import { Outlet, useNavigate } from 'react-router-dom'
import { TableOutlined, AppstoreOutlined, ShopOutlined, MenuUnfoldOutlined, MenuFoldOutlined, DatabaseOutlined } from '@ant-design/icons'
import './App.css'
import { useState } from 'react'
import type { MenuProps } from 'antd'
import { Button, Menu } from 'antd'

const { Header, Content, Sider } = Layout

function App() {
  const [collapsed, setCollapsed] = useState(false)
  const navigate = useNavigate()

  type MenuItem = Required<MenuProps>['items'][number]

  const items: MenuItem[] = [
    {
      key: 'basic-management',
      icon: <DatabaseOutlined />,
      label: '基本管理',
      children: [
        {
          key: 'products',
          icon: <ShopOutlined />,
          label: '产品列表',
          onClick: () => navigate('/products')
        },
        {
          key: 'shelves',
          icon: <TableOutlined />,
          label: '货架管理',
          onClick: () => navigate('/shelves')
        },
        {
          key: 'shelves-overview',
          icon: <AppstoreOutlined />,
          label: '货架总览',
          onClick: () => navigate('/shelves-overview')
        },
      ]
    }
  ]

  return (
    <Layout className="app-container">
      <Sider trigger={null} collapsible collapsed={collapsed}>
        <div className="logo-container">
          <h1 className="logo-title">{collapsed ? 'WMS' : '仓库管理系统'}</h1>
        </div>
        <Menu
          theme="dark"
          mode="inline"
          defaultSelectedKeys={['products']}
          defaultOpenKeys={['basic-management']}
          items={items}
        />
      </Sider>
      <Layout className="site-layout">
        <Header className="site-layout-background" style={{ padding: 0 }}>
          <Button
            type="text"
            icon={collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
            onClick={() => setCollapsed(!collapsed)}
            style={{
              fontSize: '16px',
              width: 64,
              height: 64,
            }}
          />
        </Header>
        <Content
          style={{
            margin: '24px 16px',
            padding: 24,
            minHeight: 280,
            background: '#fff',
          }}
        >
          <Outlet />
        </Content>
      </Layout>
    </Layout>
  )
}

export default App
